<template>
    <div style="margintop: 12px">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="title" name="title" label="标题" placeholder="标题"
                    :rules="[{ required: true, message: '请填写标题' }]" />
                <van-field v-model="desc" type="textarea" name="desc" label="描述" rows="2" placeholder="描述"
                    :rules="[{ required: true, message: '请填写描述' }]" />
                <van-field disabled v-model="pic_url" type="textarea" rows="2" name="pic_url" label="图片"
                    placeholder="图片" :rules="[{ required: true, message: '请填写图片地址' }]" />
                <van-field v-model="detail" name="detail" label="文章内容" rows="8" type="textarea" maxlength="2000"
                    show-word-limit placeholder="文章内容" :rules="[{ required: true, message: '请填写文章内容' }]" />
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { addCommentApi } from "@/api/comment";
import { useRouter } from "vue-router";

let router = useRouter();

const title = ref("");
const desc = ref("");
const pic_url = ref(
    "https://img2.woyaogexing.com/2023/02/06/6608ee2b503bf94445c5fc2d19a36e44.jpg"
);
const detail = ref("");

//fromData  是组件收集到的表单数据
let onSubmit = async (fromData) => {

    await addCommentApi(fromData);
    // 新增成功
    // 跳转回种草列表
    router.replace("/recommend");
};
</script>